<template>
  <div>
    <el-container class="screening-box">
      <el-form
        :inline="true"
        :model="searchData"
        class="form"
        ref="form"
        label-position="right"
        label-width="100px"
        :rules="rules"
      >
        <el-header class="screening-head">
          <div class="title">
            <i class="el-icon-search el-icon--left"></i>筛选查询
          </div>
          <div>
            <span class="toggle" v-show="showScreening" @click="showScreening=!showScreening">
              <i class="el-icon-arrow-up el-icon--left"></i>收起筛选
            </span>
            <span class="toggle" v-show="!showScreening" @click="showScreening=!showScreening">
              <i class="el-icon-arrow-down el-icon--left"></i>展开筛选
            </span>
            <el-button
              class="tlwok-btn"
              type="primary"
              @click="onSubmitForm('form',getAllFlingServiceProviderInfo)"
            >查询
            </el-button>
            <el-button class="tlwok-btn" type="primary" plain @click="onResetForm('form')">重置</el-button>
          </div>
        </el-header>
        <el-main class="screening-body" v-show="showScreening">
          <el-form-item label="用户名：" prop="userName">
            <el-input v-model.trim="searchData.userName" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="用户编号：" prop="userId">
            <el-input v-model.trim="searchData.userId" placeholder="请输入用户编号"></el-input>
          </el-form-item>
          <el-form-item label="公司名称：" prop="companyName">
            <el-input v-model.trim="searchData.companyName" placeholder="请输入公司名称"></el-input>
          </el-form-item>
        </el-main>
      </el-form>
    </el-container>

    <div class="table-box">
      <div class="table-title">
        <span class="title">
          <i class="el-icon-notebook-2 el-icon--left"></i>用户列表
        </span>
        <div>
          <el-button
            class="filing-button"
            type="primary"
            icon="el-icon-plus"
            @click="showUserDialog(0,1)"
          >添加用户
          </el-button>
          <el-upload
            class="upload-box"
            :action="uploadExcel.url"
            :name="uploadExcel.name"
            accept=".xls, .xlsx"
            :on-success="uploadSuccess"
            :show-file-list="false"
          >
            <el-button class="filing-button" type="primary" slot="trigger">导入用户</el-button>
          </el-upload>

          <el-button class="filing-button" type="primary" @click="exportUsers">导出用户</el-button>
        </div>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
        :header-cell-style="tableHeaderColor"
        :cell-style="tableCellStyle"
      >
        <el-table-column prop="userId" label="用户编号" width="120"></el-table-column>
        <el-table-column prop="userName" label="用户名" width="140"></el-table-column>
        <el-table-column prop="oauthPhone" label="认证手机" width="140"></el-table-column>
        <el-table-column prop="companyName" label="公司名称"></el-table-column>
        <el-table-column label="南/北区" width="100">
          <template slot-scope="scope">{{scope.row.filingArea | areaFilter}}</template>
        </el-table-column>
        <el-table-column label="标签" width="240">
          <template slot="header">
            <span style="margin-left: 40px;">标签</span>
            <el-button type="text" @click="showTagsDialog">[设置]</el-button>
          </template>
          <template slot-scope="scope">
            <el-tag
              v-for="(item,index) in scope.row.labelInfo"
              :key="index"
              effect="dark"
              size="small"
            >{{item.labelName}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="服务权限" width="140">
          <template slot-scope="scope">
            <el-link type="primary" @click="showAreaDialog(scope.row)">{{scope.row.isSetArea != 0 ? '查看地域权限' : '点击设置'}}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="showUserDialog(scope.row.id,2)"
              type="primary"
              size="small"
            >编辑
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData,scope.row.id)"
              type="primary"
              plain
              size="small"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-handler" v-if="tableData.length>0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.startPage"
          :page-sizes="pageInfo.pageSizeArr"
          :page-size="pageInfo.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      :title="editUserInfo?'用户信息编辑':'添加新用户'"
      :visible.sync="userInfoVisible"
      center
      @closed="onResetForm('userInfoForm',resetUserInfo)"
    >
      <el-form
        :model="userInfoForm"
        :rules="editUserInfo?{}:userInfoRules"
        :validate-on-rule-change="false"
        :inline-message="true"
        ref="userInfoForm"
        class="user-info-form"
        label-width="150px"
      >
        <el-form-item label="用户编号：" prop="id" :required="!editUserInfo">
          <el-input :disabled="editUserInfo" v-model.trim="userInfoForm.id" placeholder="请输入用户编号"></el-input>
        </el-form-item>
        <el-form-item label="用户名：" prop="name" :required="!editUserInfo">
          <el-input
            :disabled="editUserInfo||(!editUserInfo&&!userInfoCheck.id)"
            v-model.trim="userInfoForm.name"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="认证手机：" prop="phone">
          <el-input v-model.number="userInfoForm.phone" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="公司名称：" prop="company">
          <el-input v-model.trim="userInfoForm.company" placeholder="请输入公司名称"></el-input>
        </el-form-item>
        <el-form-item label="南/北区：">
          <el-select v-model="userInfoForm.region" placeholder="请选择南/北区">
            <el-option
              v-for="item in regionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单权限：">
          <el-checkbox v-model="userInfoForm.isOfflineRole">线下采购订单</el-checkbox>
        </el-form-item>
        <el-form-item label="标签：">
          <div class="tags" v-if="tags.length>0">
            <el-tag
              size="medium"
              v-for="tag in editTags"
              :key="tag.value"
              :effect="tag.checked?'dark':'plain'"
              @click="tagToggle(tag)"
            >{{tag.labelName}}
            </el-tag>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="onResetForm('userInfoForm',resetUserInfo)">取 消</el-button>
        <el-button
          type="primary"
          :disabled="!editUserInfo&&!userInfoCheck.name"
          @click="saveUserInfo('userInfoForm',1)"
        >确 定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="标签设置" :visible.sync="tagsVisible" class="tags-dialog">
      <el-tag
        :key="tag.value"
        v-for="tag in tags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag,tag.id)"
        effect="dark"
      >{{tag.labelName}}
      </el-tag>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model.trim="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      ></el-input>
      <el-button v-else plain class="button-new-tag" size="small" @click="showInput">+ 添 加</el-button>
    </el-dialog>

    <el-dialog
      title="服务权限"
      :visible.sync="areaDialogVisible"
      center
    >
        <div>
          <span>账号：{{areaUserData.account}}</span>
          <span style="margin-left: 50px;">公司名称：{{areaUserData.name}}</span>
        </div>
        <div>
          <span>服务<span style="color: red">{{areaUserData.projectList.length}}</span>个项目：</span>
          <el-tag  size="small"  v-for="(item,index) in areaUserData.projectList"
                   :key="item.projectId">{{item.name}}</el-tag>
        </div>
        <div>
          <div style="margin-bottom: 20px;">服务区域权限：</div>
          <el-container style="height: 400px;">
            <el-main>
              <el-tree
                ref="areaTree"
                :data="areaList"
                default-expand-all
                show-checkbox
                node-key="code"
                :props="areaDefaultProps">
              </el-tree>
            </el-main>
          </el-container>
        </div>

      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="saveUserArea"
        >保 存
        </el-button>
        <el-button type="primary" plain @click="resetUserArea">重 置</el-button>

      </div>
    </el-dialog>


  </div>
</template>

<script>
    export default {
        name: 'UserManagement',
        data() {
            return {

                areaDialogVisible : false,
                areaList : [],
                areaUserData : {
                    id : 0,
                    account : '',
                    name : '',
                    projectList : [],
                    areaIdList : [],
                },
                areaDefaultProps: {
                    children: 'childrenList',
                    label: 'name'
                },

                addOrRedact: 1, // 1添加新用户  2 编辑用户
                updateId: null, //用于编辑用户 传给后台
                searchData: {
                    userId: '',
                    userName: null,
                    companyName: ''
                },
                pageInfo: {
                    total: 0,
                    pageSizeArr: [10, 20, 30, 40],
                    size: 10, //分页页面数量大小
                    startPage: 1 //开始页码
                },
                regionList: [{value: 1, label: '南区'}, {value: 2, label: '北区'}],
                showScreening: true,
                tableData: [],
                checkAll: false,
                multipleSelection: [],
                rules: {
                    userId: [
                        {
                            trigger: 'blur',
                            validator: function (rule, value, callback) {
                                if (value && !Number(value)) {
                                    callback(new Error('用户编号为纯数字'))
                                    return
                                } else callback()
                            }
                        }
                    ]
                },
                editUserInfo: false,
                userInfoVisible: false,
                userInfoForm: {
                    id: '',
                    name: '',
                    phone: '',
                    company: '',
                    region: '',
                    isOfflineRole: false,
                    tags: []
                },
                tagsVisible: false,
                tags: [],
                inputVisible: false,
                inputValue: '',
                userInfoRules: {
                    id: [{trigger: 'blur', validator: this.checkId}],
                    name: [{trigger: 'blur', validator: this.checkUserName}],
                    phone: [
                        {
                            trigger: 'blur',
                            validator: function (rule, value, callback) {
                                if (value) {
                                    value = Number(value)
                                    if (!value || !/^1[3456789]\d{9}$/.test(value)) {
                                        callback(new Error('请输入正确的手机号'))
                                        return
                                    } else callback()
                                } else callback()
                            }
                        }
                    ]
                },
                uploadExcel: {
                    url: '/api/manage/importUserListExcel',
                    name: 'excel'
                },
                userInfoCheck: {
                    id: false,
                    name: false
                }
            }
        },
        computed: {
            editTags() {
                let list = JSON.parse(JSON.stringify(this.tags))
                if (this.userInfoForm.tags)
                    list.map(item => {
                        this.userInfoForm.tags.map(tag => {
                            if (item.id == tag.id) {
                                item.checked = true
                            }
                        })
                    })

                return list
            }
        },
        methods: {
            saveUserArea(){
               let areaList = this.copyObject(this.$refs.areaTree.getCheckedKeys(true))
                this.$axios.post(
                    `/api/manage/serviceProviderManage/updateUserArea`,
                    {userId : this.areaUserData.id , areaCodeList : areaList}
                )
                    .then(res => {
                        if (res.success) {
                            this.$message.success('保存成功')
                            this.areaDialogVisible = false
                            this.getAllFlingServiceProviderInfo()
                            this.getAllFilingLabelInfo()
                        } else this.$message.error(res.desc)
                    })
            },
            async resetUserArea(){
                setTimeout(() => {this.$refs.areaTree.setCheckedKeys(this.areaUserData.areaIdList)} , 50)
            },
            async showAreaDialog(item){
                let userId = item.userId
                this.areaUserData.id = item.userId
                this.areaUserData.name = item.companyName
                this.areaUserData.account = item.userName

                let result = await this.getUserProject(userId);
                if(result.success){
                    this.areaUserData.projectList = [];
                    this.$set(this.areaUserData, 'projectList', this.copyObject(result.result))
                    result = await this.getUserAreaId(userId)
                    if(result.success){
                        this.areaUserData.areaIdList = result.result
                        setTimeout(() => {this.$refs.areaTree.setCheckedKeys(result.result)} , 200)
                        this.areaDialogVisible = true;
                    }
                    else this.$message.error(result.desc)
                }
                else this.$message.error(result.desc)

            },

            async getUserProject(userId){
                return await this.$axios
                    .post('/api/manage/project/getUserProjectList' , `userId=${userId}`)
            },
            async getUserAreaId(userId){
                return await this.$axios
                    .post('/api/manage/serviceProviderManage/getUserAreaId' , `userId=${userId}`)
            },

            getAreaTree() {
                this.$axios.get(
                    `/api/manage/area/getTree`
                )
                    .then(res => {
                        if (res.success) {
                            this.areaList = res.result
                        } else this.$message.error(res.desc)
                    })
            },

            async checkId(rule, value, callback) {
                if (!value) {
                    callback(new Error('请输入用户编号'))
                    return
                }
                if (!Number(value)) {
                    callback(new Error('用户编号为纯数字'))
                    return
                }

                let {desc, result, success} = await this.$axios
                    .get('/api/manage/serviceProviderManage/checkUserId?userId=' + value)
                    .then(res => res)
                if (success) {
                    this.userInfoCheck.id = true
                } else {
                    callback(new Error(desc))
                }
            },
            async checkUserName(rule, value, callback) {
                if (value != '') {
                    if (!this.userInfoForm.id) return
                    let {desc, result, success} = await this.$axios
                        .post('/api/manage/serviceProviderManage/checkUserInfo', {
                            userId: this.userInfoForm.id,
                            userName: value
                        })
                        .then(res => res)
                    if (success) {
                        this.userInfoForm.phone = result.mobile
                        this.userInfoCheck.name = true
                    } else {
                        callback(new Error(desc))
                    }
                } else {
                    callback(new Error('请输入用户名'))
                }
            },
            statedirection(row) {
                if (row.filingArea == 1) {
                    return '南区'
                } else if (row.filingArea == 2) {
                    return '北区'
                }
            },
            //获取所有用户标签信息
            getAllFilingLabelInfo() {
                this.$axios.get('/api/manage/label/getAllFilingLabelInfo').then(res => {
                    res.result.forEach((item, index) => {
                        item.checked = false
                    })
                    res.success ? (this.tags = res.result) : this.tags
                })
            },
            //获取所有服务商管理用户信息
            getAllFlingServiceProviderInfo() {
                this.$axios
                    .post(
                        `/api/manage/serviceProviderManage/getAllFlingServiceProviderInfo?size=${this.pageInfo.size}&startPage=${this.pageInfo.startPage}`,
                        {userId: this.searchData.userId, userName: this.searchData.userName, companyName: this.searchData.companyName}
                    )
                    .then(res => {
                        if (res.success) {
                            this.pageInfo.total = res.result.total
                            this.pageInfo.size = res.result.pageSize
                            this.tableData = res.result.list
                        } else this.$message.error(res.desc)
                    })
            },
            // 删除用户信息
            deleteRow(index, rows, id) {
                const _this = this
                _this
                    .$confirm('确定要删除该信息吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    .then(() => {
                        _this.$axios
                            .post(
                                '/api/manage/serviceProviderManage/deleteFilingUserInfo?id=' + id
                            )
                            .then(res => {
                                if (res.success) {
                                    _this.messageTips('数据清除成功', 'success')
                                    _this.getAllFlingServiceProviderInfo()
                                }
                            })
                    })
                    .catch(() => {
                    })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            // 分页数量大小设置
            handleSizeChange(val) {
                this.pageInfo.size = val
                this.pageInfo.startPage = 1
                this.getAllFlingServiceProviderInfo()
            },
            // 分页当前页设置
            handleCurrentChange(val) {
                this.pageInfo.startPage = val
                this.getAllFlingServiceProviderInfo()
            },
            // 修改table header的背景色
            tableHeaderColor({row, column, rowIndex, columnIndex}) {
                return 'background-color: #f5f5f5;color: #333;font-weight: bold;text-align:center'
            },
            // 修改table tr行的样式
            tableCellStyle({row, column, rowIndex, columnIndex}) {
                return 'text-align:center'
            },
            /**
             * 点击编辑 修改用户信息
             * param{ 用户ID }
             */
            showUserDialog(id, type) {
                this.addOrRedact = type
                if (id) {
                    this.updateId = id
                    this.editUserInfo = true
                    this.$axios
                        .post(
                            '/api/manage/serviceProviderManage/getFlingServiceProviderManageInfo',
                            {
                                id: id
                            }
                        )
                        .then(res => {
                            let data = this.userInfoForm
                            let result = res.result[0]
                            data.id = result.userId
                            data.name = result.userName
                            data.phone = result.oauthPhone
                            data.company = result.companyName
                            data.region = result.filingArea
                            data.isOfflineRole = result.isOfflineRole?true:false
                            let labelIds = JSON.parse(result.labelIds)
                            if (labelIds) data.tags = labelIds
                        })
                } else {
                    this.editUserInfo = false
                }
                this.userInfoVisible = true
            },
            /**
             * 添加新用户 保存
             */
            saveUserInfo(formName) {
                const _this = this
                let url = {
                    addUrl: '/api/manage/serviceProviderManage/saveFilingUserInfo',
                    updateUrl: '/api/manage/serviceProviderManage/updateFilingUserInfo'
                }

                //添加新用户
                this.$refs[formName].validate(valid => {
                    let tagsId = []
                    _this.userInfoForm.tags.forEach((item, index) => {
                        tagsId[index] = {id: item.id}
                    })
                    let data = {
                        companyName: _this.userInfoForm.company,
                        filingArea: _this.userInfoForm.region,
                        oauthPhone: _this.userInfoForm.phone,
                        isOfflineRole: _this.userInfoForm.isOfflineRole?1:0,
                        labelIds: JSON.stringify(tagsId)
                    }
                    let postUrl = _this.addOrRedact == 1 ? url.addUrl : url.updateUrl
                    if (_this.addOrRedact == 1) {
                        data['userName'] = _this.userInfoForm.name
                        data['userId'] = _this.userInfoForm.id
                    } else if (_this.addOrRedact == 2) {
                        data['id'] = _this.updateId
                    }

                    if (valid) {
                        _this.$axios.post(postUrl, data).then(res => {
                            if (res.success) {
                                _this.messageTips(res.result, 'success')
                                _this.onResetForm(formName, this.resetUserInfo)
                                _this.getAllFlingServiceProviderInfo()
                            } else {
                                _this.messageTips(res.result, 'error')
                            }
                        })
                    } else {
                        _this.messageTips('信息提交失败', 'error')
                        return false
                    }
                })
            },
            // 重置用户信息
            resetUserInfo() {
                this.userInfoForm.tags = []
                this.userInfoVisible = false
                this.userInfoCheck.id = false
                this.userInfoCheck.name = false
            },
            // 展示标签设置弹窗
            showTagsDialog() {
                this.tagsVisible = true
            },
            // 删除已设置的用户标签
            handleClose(tag, id) {
                this.$axios
                    .get('/api/manage/label/deleteFilingLabelInfo?id=' + id)
                    .then(res => {
                        if (res.success) {
                            this.tags.splice(this.tags.indexOf(tag), 1)
                            this.messageTips(res.result, 'success')
                            this.getAllFlingServiceProviderInfo()
                        } else {
                            this.messageTips(res.result, 'error')
                        }
                    })
            },

            showInput() {
                this.inputVisible = true
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus()
                })
            },
            // 添加新标签
            handleInputConfirm() {
                let inputValue = this.inputValue
                for (let i = 0; i < this.tags.length; i++) {
                    if (inputValue === this.tags[i].labelName) {
                        this.$message.error('该标签已存在')
                        return
                    }
                }
                if (inputValue) {
                    this.tags.push({value: '', labelName: inputValue, checked: false})
                    this.$axios
                        .post('/api/manage/label/insertFilingLabelInfo', {
                            labelName: inputValue
                        })
                        .then(resp => {
                            if (resp.success) {
                                this.getAllFilingLabelInfo()
                                this.getAllFlingServiceProviderInfo()
                                this.messageTips(resp.result, 'success')
                            } else {
                                this.messageTips(resp.result, 'error')
                            }
                        })
                }
                this.inputVisible = false
                this.inputValue = ''
            },
            tagToggle(tag) {
                if (tag.checked) {
                    this.userInfoForm.tags.forEach((item, index) => {
                        if (item.id === tag.id) {
                            this.userInfoForm.tags.splice(index, 1)
                        }
                    })
                } else {
                    if (this.userInfoForm.tags.length > 2) {
                        this.$message.error('最多可选择三个标签')
                        return
                    }
                    this.userInfoForm.tags.push(tag)
                }
                tag.checked = !tag.checked
            },
            // 结果提示信息
            messageTips(tip, type) {
                this.$message({
                    message: tip,
                    type: type
                })
            },
            uploadSuccess(res, file, fileList) {
                if (res.success) {
                    this.$message({
                        type: 'success',
                        message: res.desc
                    })
                    this.getAllFlingServiceProviderInfo()
                } else this.$message.error(res.desc)
            },
            exportUsers() {
                let arr = []
                this.tableData.map(item => {
                    arr.push(item.id)
                })
                this.$axios.post('/api/manage/test').then(res => {
                    if (res.success == false) {
                        this.$message.error('请刷新后重试')
                        return
                    }
                    window.location.href =
                        window.globalConfig.apiUrl +
                        '/api/manage/exportUserListExcel?exportIds=' +
                        encodeURIComponent(JSON.stringify(arr))
                })
            }
        },
        created() {
        },
        mounted() {
            this.getAreaTree()
            this.getAllFlingServiceProviderInfo()
            this.getAllFilingLabelInfo()
        }
    }
</script>

<style lang="less" scoped>
  .title {
    font-weight: bold;
  }

  .grey {
    color: #bbb;
  }

  .red {
    color: red;
  }

  .screening-box {
    border: 1px solid #ddd;

    .form {
      width: 100%;
    }
  }

  .screening-head {
    background: #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .toggle {
      cursor: pointer;
      margin-right: 50px;
    }
  }

  .screening-body {
    border-top: 1px solid #ddd;
  }

  .btn-box {
    margin-top: 40px;

    .number {
      color: red;
    }

    .el-button--primary {
      .number {
        color: #fff;
      }
    }
  }

  .table-title {
    height: 47px;
    line-height: 47px;
    padding: 0 15px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .filing-button {
      margin-left: 30px;
    }
  }

  .table-box {
    border: 1px solid #ddd;
    margin-top: 30px;

    .el-tag {
      margin: 2px;
      cursor: default;
    }
  }

  .table-handler {
    padding: 5px 15px;
    text-align: right;

    .check-all {
      margin-right: 20px;
    }
  }

  .hasEdit {
    position: absolute;
    top: 0;
    left: 0;

    &::before {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-top: 30px solid red;
      border-right: 30px solid transparent;
    }

    .text {
      position: absolute;
      top: -3px;
      left: 2px;
      color: #fff;
      font-size: 12px;
    }
  }

  .user-info-form {
    .el-select,
    .el-input {
      width: 300px;
    }

    .tags {
      width: 450px;
    }

    .el-tag {
      cursor: pointer;
      margin-right: 15px;
    }
  }

  .tags-dialog {
    .el-tag {
      margin-right: 15px;
      margin-bottom: 15px;

      &:last-child {
        margin-right: 30px;
      }
    }

    .button-new-tag {
      margin-bottom: 15px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
      color: #5aa3e5;
      border-color: #bddaf5;
      background: #eff6fc;

      &:focus,
      &:hover {
        color: #fff;
        background: #5aa3e5;
        border-color: #5aa3e5;
      }
    }

    .input-new-tag {
      width: 90px;
      margin-bottom: 15px;
      vertical-align: bottom;
    }
  }

  .upload-box {
    display: inline-block;
  }
</style>

<style>
  .input-new-tag .el-input__inner:focus {
    border-color: #bddaf5;
  }

  .el-tree-node>.el-tree-node__children .el-tree-node {
    width: 33%;
  }

  .el-tree-node>.el-tree-node__children {
    display: flex !important;
    flex-wrap: wrap;
  }

  .el-tree-node__label{
    padding-left: 5px;
  }
</style>
